<template>
  <div id="container-verify" class="login-view">
    <div id="progress-bar" class="progress-bar-class"></div>
    <div class="login-progress" onselectstart="return false;" unselectable="on">
      <!-- {{ description }} -->
      请拖动滑块验证
    </div>
    <div id="verify-btn" class="login-btn">
      <el-icon style="width: 100%; height: 100%">
        <Select v-if="isVerify" />
        <DArrowRight v-else />
      </el-icon>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { useDragVerify } from '@/hooks/event/useDragVerify'
  import { onMounted, onUnmounted, ref } from 'vue'
  import { DArrowRight, Select } from '@element-plus/icons-vue'
  import common from '@/utils/common'
  import { nextTick } from 'vue'
  defineProps({})

  const emit = defineEmits(['isVerifySuccess'])
  const isVerify = ref(false)
  const success = async function () {
    console.log('isVerify success')
    await common.XmMessage(0, '验证通过')
    isVerify.value = true
    emit('isVerifySuccess', true)
  }
  const cancel = async function () {
    console.log('isVerify cancel')
    await common.XmMessage(1, '滑动过快或未通过安全机制，请重试')
    isVerify.value = false
    emit('isVerifySuccess', false)
  }
  // onMounted(() => {

  // })

  const reset = useDragVerify(
    '#verify-btn',
    '#container-verify',
    '#progress-bar',
    success,
    cancel
  )

  onUnmounted(() => {
    isVerify.value = false
  })

  defineExpose({
    reset,
  })
</script>
<style lang="scss" scoped>
  .login-view {
    height: 44px;
    width: 100%;
    background-color: white;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    .progress-bar-class {
      position: absolute;
      background-color: #33ca90;
      height: 44px;
    }
    .login-progress {
      position: absolute;
      width: 100%;
      line-height: 44px;
      text-align: center;
      color: #2d3a4b;
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
      -o-user-select: none;
      -ms-user-select: none;
    }
    .login-btn {
      position: absolute;
      height: 44px;
      width: 44px;
      border-top: 1px solid var(--el-border-color);
      background-color: #ccc;
    }
  }
</style>
